import React, { useState } from "react";
import {
  Row,
  Col,
  Input,
  Select,
  Button,
  Spin,
  Modal,
  Space,
  Breadcrumb,
  Table,
  message,
  Popconfirm,
} from "antd";
import {
  AudioOutlined,
  EyeFilled,
  EditFilled,
  DeleteFilled,
  PlusCircleOutlined,
} from "@ant-design/icons";
// import "./news.css";
import { Link } from "react-router-dom";
import {
  _addCode,
  _updateCode,
  _delCode,
  _getCodeList,
} from "../../util/api/user/index";

class NewsList extends React.Component {
  state = {
    isLoading: false,
    a_visible: false,
    e_visible: false,
    confirmLoading: false,
    typeName: "",
    typeList: null,
    user_code_id: null,
  };
  getData = () => {
    this.setState({ isLoading: true });
    _getCodeList()
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          // console.log(res.data.data);
          this.setState({ isLoading: false });

          const typeList = res.data.data;
          for (let i = 0; i < typeList.length; i++) {
            typeList[i].key = typeList[i].user_code_id;
            typeList[i].codeName = typeList[i].user_code_name;
            typeList[i].control = typeList[i].user_code_id;
          }
          this.setState({ typeList: typeList });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  componentDidMount = () => {
    this.getData();
    console.log("xxxxxxxxx");
  };
  editSource = (val) => {
    this.setState({
      e_visible: true,
      user_code_id: val,
    });
  };
  editHandle = () => {
    let tempData = {
      user_code_name: this.state.typeName,
    };

    _updateCode(this.state.user_code_id, tempData)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            e_visible: false,
          });
          message.success("修改成功");
          this.getData();
        }
      })
      .catch(() => {
        this.setState({ confirmLoading: false });
        message.error("服务器错误");
      });
  };
  deletSource = (val) => {
    _delCode(val)
      .then((res) => {
        console.log(res.data);
        if (res.status === 200 && res.data.code === 0) {
          if (res.data.data && res.data.data.code === -1) {
            message.warning(res.data.data.msg);
          } else {
            message.success("删除成功");
            this.getData();
          }
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  
  showModal = () => {
    this.setState({
      a_visible: true,
    });
  };
  handleOk = () => {
    this.setState({
      confirmLoading: true,
    });
    let tempData = {
      user_code_name: this.state.typeName,
    };

    _addCode(tempData)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            a_visible: false,
            confirmLoading: false,
          });
          message.success("添加成功");
          this.getData();
        }
      })
      .catch(() => {
        this.setState({ confirmLoading: false });
        message.error("服务器错误");
      });
  };
  handleCancel = () => {
    this.setState({
      e_visible: false,
      a_visible: false,
    });
  };
  onInputChange = (e) => {
    this.setState({ typeName: e.target.value });
  };

  render() {
    const columns = [
      {
        title: "状态名称",
        dataIndex: "codeName",
      },
      {
        title: "操作",
        dataIndex: "control",
        render: (text, record) => (
          <Space size="middle">
            <EditFilled
              onClick={this.editSource.bind(this, text)}
              style={{ color: "#95a5a6" }}
            />
            <Modal
              title="修改状态"
              visible={this.state.e_visible}
              onOk={this.editHandle}
              onCancel={this.handleCancel}
            >
              <Input onChange={this.onInputChange} allowClear />
            </Modal>
            <Popconfirm
              title="确认要删除吗？"
              okText="是"
              cancelText="否"
              onConfirm={this.deletSource.bind(this, text)}
            >
              <DeleteFilled style={{ color: "#7f8c8d" }} />
            </Popconfirm>
          </Space>
        ),
      },
    ];

  
    return (
      <div>
        <div className="newslist-header">
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item>成员管理</Breadcrumb.Item>
            <Breadcrumb.Item>学生状态</Breadcrumb.Item>
          </Breadcrumb>

          <div>
            <Button
              icon={<PlusCircleOutlined />}
              onClick={this.showModal}
              type="primary"
            >
              添加
            </Button>
            <Modal
              title="添加状态"
              visible={this.state.a_visible}
              onOk={this.handleOk}
              confirmLoading={this.state.confirmLoading}
              onCancel={this.handleCancel}
            >
              <Input onChange={this.onInputChange} allowClear />
            </Modal>
          </div>
        </div>

        <div className="admin-body" style={{ padding: 15, minHeight: 360 }}>
          <Spin tip="Loading..." spinning={this.state.isLoading}>
            <Table
              columns={columns}
              dataSource={this.state.typeList}
              pagination={{ pageSize: 10 }}
              // scroll={{ y: 300 }}
            />
          </Spin>
        </div>
      </div>
    );
  }
}

export default NewsList;
